<template>
  <div class="goods-sku-container">
    <!-- 接口返回的sku -->
    <div class="row" v-for="(item, index) in list" :key="index">
      <div class="title" :class="{ 'type1': item.type == 1, 'type2': item.type == 0 }">{{ item.name }}</div>
      <div class="sku-list">
        <div class="sku-type"
          :class="{ 'type1': sku.picUrl, 'type2': !sku.picUrl, 'active': sku.active }"
          v-for="(sku, index1) in item.skuSpecValueList"
          :title="sku.value"
          @click="selectSkuSpecValueHandler(index, index1)"
          :key="index1">
          <img :src="sku.picUrl" :alt="sku.value" :title="sku.value" v-if="sku.picUrl" />
          <span v-else>{{ sku.value }}</span>
          <div class="selected">
            <span>✔</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="title type2">数量</div>
      <div class="sku-list">
        <NumberInput />
      </div>
    </div>
  </div>
</template>

<script>
import NumberInput from '../../components/common/NumberInput'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    /**
     * 选中当前点击的sku
     * @param { Number } skuIndex 当前操作的第一维度（价格还是尺码等信息）
     * @param { Number } valueIndex 当前操作的第二维度（选中的那个）
     */
    selectSkuSpecValueHandler (skuIndex, valueIndex) {
      this.$emit('sku-change', [skuIndex, valueIndex])
    }
  },

  components: {
    NumberInput
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.goods-sku-container {
  .row {
    overflow: hidden;
    .title {
      float: left;
      width: 54px;
      &.type1 {
        line-height: 50px;
      }
      &.type2 {
        line-height: 30px;
      }
    }
    .sku-list {
      overflow: hidden;
      .sku-type {
        border: 1px solid #ddd;
        cursor: pointer;
        float: left;
        margin: 0px 10px 16px 0px;
        position: relative;
        overflow: hidden;
        &.type1 {
          width: 50px;
          height: 50px;
          img {
            background: #f4f4f4;
            width: 100%;
            height: 100%;
          }
        }
        &.type2 {
          font-size: 12px;
          padding: 0px 16px;
          line-height: 28px;
          height: 28px;
        }
        .selected {
          bottom: 0px;
          color: @write;
          display: none;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0px;
          text-align: right;
          span {
            display: block;
            position: absolute;
            right: -1px;
            top: 2px;
            width: 16px;
            height: 16px;
            line-height: 16px;
          }
        }
        &.active {
          border: 1px solid @font-color-golden;
          .selected {
            border-bottom: 16px solid @font-color-golden;
            border-left: 16px solid transparent;
            display: block;
          }
        }
      }
    }
  }
}
</style>
